<template>
<div>
    <div id="abnormalPro"></div>
</div>
</template>

<script>

  export default {
    name: "AbnormalStatistics",
    data() {
      return {
        dsource:[],
        dseries:[],
        thisMonth:''
      }
    },
    methods: {
      getAbnormal(){
        var chartDom = document.getElementById('abnormalPro');
        var myChart = this.$echarts.init(chartDom);
        var option;
        let color = ['#62bbb1', '#ef8888', '#6bc4de', '#acc947', '#e8cd5f','#90cfc9','#b9f2a1'];
        setTimeout(()=>{
          option = {
            color:color,
              legend: {
                textStyle:{
                       fontSize:20
                     }
              },
              tooltip: {
                trigger: 'axis',
                showContent: false
              },
              dataset: {
                source: this.dsource
              },
              xAxis: { type: 'category' },
              yAxis: { gridIndex: 0,splitNumber: 1},
              grid: { top: '55%' },
              series: this.dseries
          };
          myChart.on('updateAxisPointer', function (event) {
            //鼠标移动触发x轴事件，获取对象数据
              const xAxisInfo = event.axesInfo[0];
              if (xAxisInfo) {
                const dimension = xAxisInfo.value + 1;
                myChart.setOption({
                  series: {
                    id: 'pie',
                    label: {
                      formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                    },
                    encode: {
                      value: dimension,
                      tooltip: dimension
                    }
                  }
                });
              }
            });
            myChart.setOption(option);
        },2500)
        option && myChart.setOption(option);
        this.getWindowAdjust(myChart);

      },
      //获取图表数据
      getData(){
        //图表的类目轴数据
        let firstList=[];
        //图表各系列的value数据
        let secondList=[];
        this.$axios({
          url: 'dispatch/abnormal/getAbnormalHalfYear',
          method: 'post'
        }).then(res => {
          console.info(res.data.object)
          if(res.data.success){
            let map=res.data.object;
            let line={
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                    };
            let pie={
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    //鼠标移上高亮
                    emphasis: {
                      focus: 'self'//淡出其它
                    },
                    label: {
                      formatter: '{b}: {@'+this.thisMonth+'} ({d}%)',
                      fontSize:18
                    },
                    encode: {
                      itemName: '异常类型',
                      value: this.thisMonth,
                      tooltip: this.thisMonth
                    }
                  };
            //遍历返回的数据，解析成标题数组和数值系列数组
            for(var data in map){
              // console.info(data)
              // console.info(map[data])
              if(data=='异常类型'){
                firstList.push(data);
                for(let i=0;i<6;i++){
                  firstList.push(map[data][i])
                }
                //这里按要求firstList（标题数组）数据要首先push到dsource中
                this.dsource.push(firstList)
              }
            };
            for(var data in map){
              if(data!='异常类型'){
                this.dseries.push(line);
                secondList=[];
                secondList.push(data);
                for(let i=0;i<6;i++){
                  secondList.push(map[data][i])
                }
                this.dsource.push(secondList)
              }
            }
            this.dseries.push(pie)
            // console.info(this.dsource)
          }
        }).catch(err => {
          this.$message.error(err.message);
        });
      },
      //获取当前年月
      getYearMonth(data) {
      let yearMonth
      var date = data? new Date(data):new Date()
      var month = date.getMonth() + 1
      if (month >= 1 && month <= 9) {
      month = '0' + month
      }
      yearMonth = date.getFullYear() + '-' + month
      return yearMonth
      },
    //窗口自适应
    getWindowAdjust(obj){
      window.addEventListener("resize", function() {
        obj.resize();
      });
    }
    },
    mounted() {
      this.thisMonth=this.getYearMonth(new Date());
      this.getData();
      this.getAbnormal();
    }
  }
</script>

<style scoped>
#abnormalPro{
  width: 100%;
  height: 740px;
  margin-top: 60px;
}
</style>
